<script type="text/javascript" src="__PUBLIC__/js/jquery/lightbox.min.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>实现原理</span>
                            </div>
                            <div class="p15">
                            	需要注意的是界面中的按钮图片路劲需要设置，注意imageLoading,imageBtnPrev,imageBtnNext,imageBtnClose,imageBlank的路径问题
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
        <tr>
        	<td>overlayBgColor</td>
            <td>遮罩层颜色,默认#000</td>
        </tr>
        <tr>
        	<td>overlayOpacity</td>
            <td>遮罩层透明度,默认0.8</td>
        </tr>
        <tr>
        	<td>fixedNavigation</td>
            <td>控制按钮的显示方式，默认false:经过显示框才显示按钮；true：按钮一直显示</td>
        </tr>
        <tr>
        	<td>imageLoading</td>
            <td>读取状态图片,默认images/lightbox-ico-loading.gif</td>
        </tr>
        <tr>
        	<td>imageBtnPrev</td>
            <td>上一张按钮图片,默认images/lightbox-btn-prev.gif</td>
        </tr>
        <tr>
        	<td>imageBtnNext</td>
            <td>下一张按钮图片,默认images/lightbox-btn-next.gif</td>
        </tr>
        <tr>
        	<td>imageBtnClose</td>
            <td>关闭按钮图片,默认images/lightbox-btn-close.gif</td>
        </tr>                
        <tr>
        	<td>imageBlank</td>
            <td>未知属性,默认images/lightbox-blank.gif</td>
        </tr>
        <tr>
        	<td>containerBorderSize</td>
            <td>图片容器表框大小,默认10</td>
        </tr>
        <tr>
        	<td>containerResizeSpeed</td>
            <td>图片边框大小切换速度,默认400</td>
        </tr>
        <tr>
        	<td>txtImage</td>
            <td>image文字的替换,默认Image</td>
        </tr> 
        <tr>
        	<td>txtOf</td>
            <td>of文字的替换,默认of</td>
        </tr>
        <tr>
        	<td>keyToClose</td>
            <td>关闭按钮快捷键,默认c</td>
        </tr>
        <tr>
        	<td>keyToPrev</td>
            <td>上一张图快捷键,默认p</td>
        </tr> 
         <tr>
        	<td>keyToNext</td>
            <td>下一张图快捷键,默认n</td>
        </tr>
         <tr>
        	<td>imageArray</td>
            <td>待显示的图片数组,默认[]</td>
        </tr>
         <tr>
        	<td>activeImage</td>
            <td>被激活的图片下标,默认0</td>
        </tr>
        </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;lightbox.min.js文件</p>
                            	<div class="pt15"><strong>效果</strong></div>
                                <p>CSS</p>
                                <pre>#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}</pre>
                                <p>js</p>
                                <pre>$('#demo1 a').lightBox({txtImage:'图片',txtOf:'/'});</pre>
             <div class="blank10"></div>
			<div id="demo1">
                <a href="__PUBLIC__/images/jquery/a.gif" title="林氏智造"><img src="__PUBLIC__/images/jquery/a.gif"  alt="林氏智造-图片1"/></a>
                <a href="__PUBLIC__/images/jquery/b.gif" title="林氏智造"><img src="__PUBLIC__/images/jquery/b.gif"  alt="林氏智造-图片2"/></a>
                <a href="__PUBLIC__/images/jquery/a.gif" title="林氏智造"><img src="__PUBLIC__/images/jquery/a.gif"  alt="林氏智造-图片3"/></a>
                <a href="__PUBLIC__/images/jquery/b.gif" title="林氏智造"><img src="__PUBLIC__/images/jquery/b.gif"  alt="林氏智造-图片4"/></a>
            </div>
                            	                             
                                
                            </div>  

                            <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/VvrSkK" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 $(function(){
	 	$('#demo1 a').lightBox({
			txtImage:'图片',
			txtOf:'/',
			imageLoading:"__PUBLIC__/images/jquery/lightbox/lightbox-ico-loading.gif",
			imageBtnPrev:"__PUBLIC__/images/jquery/lightbox/lightbox-btn-prev.gif",
			imageBtnNext:"__PUBLIC__/images/jquery/lightbox/lightbox-btn-next.gif",
			imageBtnClose:"__PUBLIC__/images/jquery/lightbox/lightbox-btn-close.gif",
			imageBlank:"__PUBLIC__/images/jquery/lightbox/lightbox-blank.gif"
		});
	});
 </script>   
